<template>
  <div class="product-item-compo">
    <div class="cover">
      <img :src="cover" alt />
    </div>
    <div class="info">
      <slot name="product-item"></slot>
    </div>
    <div class="arrow" v-if="type == 'click'">
      <icon name="arrow" size="1.5rem" color="#DBD7DB" />
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
import { defaultImage } from "../service/default_source.js";

export default {
  components: {
    Icon
  },
  props: {
    type: {
      type: String,
      default: ""
    },
    cover: {
      type: String,
      default: defaultImage
    }
  }
};
</script>

<style scoped>
.product-item-compo {
  display: grid;
  grid-template-columns: 30% 65% 5%;
  grid-template-rows: 100%;
  padding: 10px;
  border-bottom: 1px solid var(--line-between-color);
  transition: 0.2s;
  overflow: hidden;
  background-color: #fff;
}

.product-item-compo:hover {
  /* background-color: var(--line-between-color) */
}

.info {
  /* padding-left: 5px; */
  /* padding-right: 5px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-right: 6px; */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  /* height: 100px; */
  /* width: 100px; */
  transform: translateY(50%);
  /* top: 50%; */
  z-index: 0;
}

.arrow {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow img {
  width: 1.875rem;
  max-height: 1.875rem;
}
</style>